<template>
<div class="head-cp">
    <div class="left-container">
        <router-link
            :class="{
                'item':true,
                'active-item':$route.name==item.name || true,
            }"
            v-for="(item,index) in optionList.slice(0,3)"
            :key="index"
            :to="item.path">
            {{item.title}}
        </router-link>
    </div>
    <div class="centre-container">
        <img
            class="img"
            :src="'https://s2.loli.net/2021/12/05/oH7tL3Ged6avOzb.jpg'"
            @click="toPath">
        测试
    </div>
    <div class="right-container">
        <router-link
            :class="{
                'item':true,
                'active-item':$route.name==item.name || true,
            }"
            v-for="(item,index) in optionList.slice(0,3)"
            :key="index"
            :to="item.path">
            {{item.title}}
        </router-link>
        <router-link
            class="search-bt"
            to="/search">
            <i class="el-icon-search"></i>
        </router-link>
    </div>
</div>
</template>

<script>
/**
 * 公用的头部组件
 */
export default {
    name: 'Head',
    data() {
        return {
            optionList:[
                {
                    title:'政策查询',
                    path:'/123',
                    name:'policy',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
            ],
            moreShow:false,
        };
    },
    mounted(){
        this.initEvent();
    },
    methods: {
        initEvent(){
            let moreShowBt = this.$refs.MoreShowBt;
            let MoreContainer = this.$refs.MoreContainer;
            document.addEventListener('click', e => {  //判断点击事件的包含关系
                e = e || window.event;
                //如果点击事件不在容器上和点击按钮上则隐藏容器
                if (!moreShowBt.contains(e.target) && !MoreContainer.contains(e.target)) {
                    this.moreShow = false;
                }
            });
        },
        onMore(){
            this.moreShow = !this.moreShow;
        },
        toPath(){
            this.$router.push({ 
                path:'/'
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.head-cp{
    --head-height: 45px;
    --head-border-color: #c5c5c5;
    --head-border-radius:12px;
    width: 100%;
    height: var(--head-height);
    padding: 0 15px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-gap: 15px;
    align-items: center;
    color: #515767;
    >.left-container{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        >*{
            margin-right: 15px;
        }
    }
    >.centre-container{
        font-size: 17px;
        font-weight: bold;
        display: flex;
        align-items: center;
        >.img{
            width: 30px;
            height: 30px;
            cursor: pointer;
            border-radius: 3px;
            margin-right: 15px;
        }
    }
    >.right-container{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        >*{
            margin-left: 15px;
        }
        >.search-bt{
            width: 100px;
            height: 35px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            background-color: rgb(240, 240, 240);
            border-radius: 12px;
            >i{
                font-size: 17px;
                font-weight: bold;
            }
        }
    }
    .item{
        font-size: 15px;
        color: rgb(42, 50, 65);
    }
    .active-item{
        position: relative;
        z-index: 0;
        &::after{
            content: '';
            position: absolute;
            left: -5px;
            bottom: -2px;
            width: 70%;
            height: 10px;
            // background-color: rgb(0, 213, 142);
            background-color: rgb(109, 109, 109);
            z-index: -1;
            border-radius: 3px;
        }
    }
}
</style>
